<template>
  <template v-if="data || data === 0">
    <template v-if="options?.length > 0">
      {{ proxy.$arrFind(options, data, valueName, labelName) }}
    </template>
    <template v-else>
      <span v-html="proxy.$decodeHtmlEntities(`${data}${unit || ''}`)" class="copyHtml"></span>
    </template>
  </template>
  <div class="text-color-info" v-else>--</div>
</template>
<script setup lang="ts">
import { onMounted, getCurrentInstance, onUnmounted } from 'vue';
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;
    options?: any;
    labelName?: string;
    valueName?: string;
    unit?: string;
  }>(),
  {
    data: '--',
    labelName: 'label',
    valueName: 'value',
  },
);
onMounted(() => { });
onUnmounted(() => { });
</script>
<style scoped lang="scss">
.copyHtml {
  line-height: 1.68em;
  margin: 4px 0 0;
  white-space: pre-wrap;
  cursor: pointer;
}
</style>
